Redux
Redux是由flux衍生而来的状态管理器,应用于大型的React应用,Redux会让React中的state变的可预测,网络有大量的Redux的教程,详细的介绍了redux的基础概念,
应用场景以及高级应用。
Redux有以下几个基础方面需要大家了解:
1、store
在redux中只有一个单一的store,我所理解的store就是应用的数据结构。
2、action
当用户做页面上做一些交互行为的时候,这时可以被描述为redux中的action。
3、reducer
我理解的reducer是对action(s)的提炼,然后switch-case的处理,它是一个纯函数,返回对应action行为进一步处理后的state,当然可以有多个reducer啦。
Store
//引入一个数据源
import { createStore } from 'redux'
import rootReducer from './reducer/index'
import events from './data/event';
//设置一个默认的数据结构
const defaultState = {
events:events
};
//创建一个Store实例(reducer,defaultState)
const store = createStore(rootReducer,defaultState);
export default store;
Action
//回车创建一个todo
export function createEvent (title,eventid,complete){
return {
type:"CREATE_EVENT",
title,
eventid,
complete
}
}
//点击圆圈标识是否完成
export function toggleStatusComplete(i){
return {
type:"TOGGLE_STATUS_COMPLETE",
i
}
}
//删除一个todo
export function removeEvent(i){
return {
type:"REMOVE_EVENT",
i
}
}
Reducer
index.js
//redux提供了一个combineReducers,可以把多个reducer合为一个rootReducer
import { combineReducers } from 'redux'
import events from './events'
const rootReducer = combineReducers({events})
export default rootReducer
events.js
/*
*events中存在许多的actionType
*对应不同的action,进行不同的数据操作,返回不同的state信息
*/
export default function events(state, action){
var i;
switch (action.type) {
case "CREATE_EVENT":
console.log("create Event at here");
return [
...state.slice(0),
{title:action.title,eventid:action.eventid,complete:action.complete}
];
case "TOGGLE_STATUS_COMPLETE":
console.log("TOGGLE_STATUS_COMPLETE at here");
i = action.i;
return [
...state.slice(0,i),
{...state[i],complete:!state[i].complete },
...state.slice(i+1)
];
case "REMOVE_EVENT":
console.log("REMOVE_EVENT at here");
i = action.i;
return [
...state.slice(0,i),
...state.slice(i+1)
];
default:
return state;
}
}